<%--
  Created by IntelliJ IDEA.
  User: 挽
  Date: 2024/11/19
  Time: 下午8:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
    <link rel="stylesheet" href="static/css/product.css">
    <script src="static/js/axios.min.js"></script>
    <script src="static/js/vue-2.6.10.js"></script>
</head>
<body>
    <div class="product-list" id="app">
        <div class="product-item" v-for="item in product_list" :key="item.id">
            <div class="product-img">
                <img :src="`static/img/productImages/`+item.picture">
            </div>
            <div class="product-info">
                <div>品名：<span>{{item.name}}</span></div>
                <div>原价：<del>{{item.market_price}}</del></div>
                <div>现价：<span>{{item.sell_price}}</span></div>
                <div>简介：<span>{{item.description}}</span></div>
                <div><a href="productMsg.jsp">查看详细内容</a></div>
            </div>
        </div>
    </div>

    <script>
        new Vue({
            el:'#app',
            data:{
                product_list:[{name:"商品1"},{name:"商品2"},{name:"商品3"},{name:"商品4"},],
            },
            created(){
                axios({
                    url:'product_List.do',
                }).then(re=>{
                    console.log(re)
                    this.product_list=re.data
                })
            },
        })
    </script>
</body>
</html>

